<template>
    <div class="view">
        <nav-bar title="收货地址" :fixed="false" backgroundColor="#f4f4f4" color="#3c3c3c">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
            <div class="add" slot="right" @click="add">
                添加新地址
            </div>
        </nav-bar>
        <div class="address-wrap">
            <cube-scroll :data="addressList">
                <div class="address-item" v-for="(address,index) in addressList" :key="address.address_d" @click="setDefault(index)">
                    <div class="address-letter">{{address.name | firstLetter}}</div>
                    <div class="address-info">
                        <div class="address-info-top">
                            <div class="name">{{address.name}}</div>
                            <div class="phone">{{address.phone}}</div>
                        </div>
                        <div class="address-info-bottom">
                            <span class="address-default" v-if="address.address_id === defaultId">默认</span>
                            <span class="address-detail">{{address.region.province + ' ' + address.region.city + ' ' +address.region.region + ' ' + address.detail }}</span>
                        </div>
                    </div>
                    <div class="address-btn" @click.stop="editAddress(index)">编辑</div>
                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import Heart from "@/unit/Heart";
    import UserEntity from "@/entity/UserEntity";
    import {updateUser} from "@/store/dispatches";
    import NavBar from "@/components/aui/NavBar.vue";

    @Component({
        components: {
            NavBar
        }
    })
    export default class AddressList extends Scene {
        private addressList: any[] = [];
        private defaultId: number = -1;

        @State("UserStore")
        public user!: InterfaceUser;

        private back() {
            this.navigateBack();
        }

        private add(): void {
            this.navigateTo({
                name: "addressEdit"
            });
        }


        private getData(): void {
            Http.post(this.api.addressList, {}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    this.addressList.splice(0,this.addressList.length);
                    this.addressList.push(...res.data.list);
                    this.defaultId = res.data.default_id || 0;
                } else {
                    this.globalSingleResultToast(res);
                }
            });
        }

        private activated() {
            this.getData();
        }

        private mounted(): void {
            this.getData();
        }

        private editAddress(i: number): void {
            this.navigateTo({
                name: "addressEdit",
                query: {
                    id: this.addressList[i].address_id
                }
            });
        }

        private setDefault(i: number): void {
            if (this.$route.query.referer === "orderConfirm") {
                const toast = (<any> this).$createToast({
                    time: 0,
                    txt: "请稍候",
                    mask: true,
                }).show();
                Http.post(this.api.addressSetDefault, {...this.addressList[i]}, {token: this.user.token}).finally(() => {
                    toast.hide();
                    this.navigateBack();
                });
            }
        }
    }
</script>

<style scoped lang="stylus">
    .view
        width 100vw;
        height 100vh;
        background #fff;

        .address-wrap
            height calc(100vh - 44px - var(--safe-area-inset-top));
            position relative;
            background #fff;
            padding-bottom var(--safe-area-inset-bottom);

            .address-item
                padding 14px 0 14px 12px;
                display flex;
                justify-content center;
                align-items center;

                .address-letter
                    height 30px;
                    width 30px;
                    background $theme-gay-gradient;
                    color #fff;
                    border-radius 30px;
                    display flex;
                    align-items center;
                    justify-content center;
                    font-size 13px;

                .address-info
                    flex 1;
                    padding 0 10px 0 12px;

                    .address-info-top
                        height 20px;
                        padding 1px 0 2px 0;
                        display flex;
                        align-items flex-end;

                        .name
                            font-size 14px;
                            color #303030

                        .phone
                            font-size 12px;
                            color #9a9a9a;
                            padding-left 12px;

                    .address-info-bottom
                        padding 4px 0;

                        .address-default
                            background $theme-thin-color;
                            color $theme-common-color;
                            font-size 10px;
                            padding 2px 8px;
                            opacity .9;
                            margin-right 10px;

                        .address-detail
                            line-height 21px;
                            color #333;
                            font-size 12px;


                .address-btn
                    width 50px;
                    height 23px;
                    position relative;
                    line-height 23px;
                    text-align center;
                    color #a8a8a8;
                    font-size 11px;

                    &::before
                        content '';
                        height 100%;
                        width 1px;
                        transform scaleX(.5);
                        display block;
                        top 0;
                        left 0;
                        position absolute;
                        background #ececec;


</style>
